<div class="row content-space">
    <div>
        <div class="row flex-items-xs-between rightPos">
            <div class="flex-xs-middle option-left">
            </div>
            <div class="flex-xs-middle option-right">
                <hbr-filter [withDivider]="true" filterPlaceholder='{{"MEMBER.FILTER_PLACEHOLDER" | translate}}' (filterEvt)="doSearch($event)" [currentValue]="searchMember"></hbr-filter>
                <span class="refresh-btn" (click)="refresh()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <clr-dg-action-bar>
            <button class="btn  btn-secondary" (click)="openAddMemberModal()" [disabled]="!hasCreateMemberPermission">
                <span><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'MEMBER.USER' | translate }}</span>
            </button>
            <button class="btn  btn-secondary" (click)="openAddGroupModal()" [disabled]="!hasCreateMemberPermission || !(isLdapMode || isHttpAuthMode || isOidcMode)">
                <span><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'MEMBER.LDAP_GROUP' | translate}}</span>
            </button>
            <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn  btn-link" clrDropdownTrigger>
                <span id='member-action'>{{'MEMBER.ACTION' | translate}}<clr-icon shape="caret down"></clr-icon></span>
                <clr-dropdown-menu *clrIfOpen>
                    <label class="dropdown-header">{{'MEMBER.SET_ROLE' | translate}}</label>
                    <button clrDropdownItem (click)="changeMembersRole(selectedRow, 1)" [disabled]="!(selectedRow.length && hasUpdateMemberPermission) || onlySelf">{{'MEMBER.PROJECT_ADMIN' | translate}}</button>
                    <button clrDropdownItem (click)="changeMembersRole(selectedRow, 4)" [disabled]="!(selectedRow.length && hasUpdateMemberPermission) || onlySelf">{{'MEMBER.PROJECT_MAINTAINER' | translate}}</button>
                    <button clrDropdownItem (click)="changeMembersRole(selectedRow, 2)" [disabled]="!(selectedRow.length && hasUpdateMemberPermission) || onlySelf">{{'MEMBER.DEVELOPER' | translate}}</button>
                    <button clrDropdownItem (click)="changeMembersRole(selectedRow, 3)" [disabled]="!(selectedRow.length && hasUpdateMemberPermission) || onlySelf">{{'MEMBER.GUEST' | translate}}</button>
                    <button clrDropdownItem (click)="changeMembersRole(selectedRow, 5)" [disabled]="!(selectedRow.length && hasUpdateMemberPermission) || onlySelf">{{'MEMBER.LIMITED_GUEST' | translate}}</button>
                    <div class="dropdown-divider"></div>
                    <button clrDropdownItem (click)="openDeleteMembersDialog(selectedRow)" [disabled]="!(selectedRow.length && hasDeleteMemberPermission) || onlySelf">{{'MEMBER.REMOVE' | translate}}</button>
                </clr-dropdown-menu>
            </clr-dropdown>
        </clr-dg-action-bar>
        <clr-datagrid [(clrDgSelected)]="selectedRow" [clrDgLoading]="loading" class="datagrid-pt">
            <clr-dg-column>{{'MEMBER.NAME' | translate}}</clr-dg-column>
            <clr-dg-column>{{'MEMBER.MEMBER_TYPE'| translate}}</clr-dg-column>
            <clr-dg-column>{{'MEMBER.ROLE' | translate}}</clr-dg-column>
            <clr-dg-row *clrDgItems="let m of members"  [clrDgItem]="m">
                <clr-dg-cell>{{m.entity_name}}</clr-dg-cell>
                <clr-dg-cell>{{member_type_toString( m.entity_type) | translate}}</clr-dg-cell>
                <clr-dg-cell>
                    <span *ngIf="ChangeRoleOngoing(m.id)" class="spinner spinner-inline"></span>
                    <span *ngIf="!ChangeRoleOngoing(m.id)">{{roleInfo[m.role_id] | translate}}</span>
                </clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'MEMBER.OF' | translate}} </span>
                {{pagination.totalItems }} {{'MEMBER.ITEMS' | translate}}
                <clr-dg-pagination #pagination [clrDgPageSize]="15"></clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
    <add-member [projectId]="projectId" [memberList]="members" (added)="addedMember($event)"></add-member>
    <add-group [projectId]="projectId" [memberList]="members" (added)="addedGroup($event)"></add-group>
    <add-http-auth-group [projectId]="projectId" (added)="addedGroup($event)"></add-http-auth-group>
</div>
